import React from 'react';
import {Icon,Badge,Tools, SearchBar,} from 'weaver-mobile';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { SearchPage,SearchAdvanced, ListViewPage } from 'weaver-mobile-page';
import parseInt from 'lodash/parseInt';
import Add from '../docForm/Add';
const AddButton = Add.addButton;

const getLabel = Tools.getLabel;

@inject('systemDocStore')
@withRouter
@observer
export default class ListMode extends React.Component {
  render() {
    const {systemDocStore} = this.props,
        {docListStore,searchAdvancedBasicStore,doSearchAdvance} = systemDocStore,
        {searchPage,docListViewPageStore, addStore, searchKey} = docListStore;
    return (
      <div className="wea-system-doc-category">
        <div style={{height: "100%"}} >
          <SearchPage
            store={searchPage}
            type={1}
            nameKey="name"
            rowKey="key"
            searchValue={searchKey.docsubject || ''}
            onSubmit={(v) => {
              docListViewPageStore.clearData();
              docListViewPageStore.setState({refreshLoading:false})
              docListStore.doSearchBySubject(typeof(v) === 'string' ? v : v.name)
            }}
            onClear={()=>{
              docListStore.clearSearchHistory();
            }} 
          />
          <SearchAdvanced
            store={searchAdvancedBasicStore}
            onSubmit={()=>{
              doSearchAdvance();
            }}
          />
          <SearchBar
            className="search-select"
            placeholder={getLabel(32933, '请输入关键字')}
            value={searchKey.docsubject || ''}
            showExtraButton
            extraButton={[
              { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> },
            ]}
            onFocus={() => this.props.history.push(searchPage.path)}
            onExtraButtonClick={() => {this.props.history.push(searchAdvancedBasicStore.path)}}
          />
          <div className="wea-system-doc-category-scroll">
            <ListViewPage.Normal
              className="wea-system-doc-category"
              getDataCustom={true}
              store={docListViewPageStore}
              customHeight="100%"
              onRowClick={(rowData) => {
                docListStore.setDocIsNew(rowData.docid);
                window.location=`/spa/document/static4mobile/index.html#/doc/${rowData.docid}`;
                // this.props.history.push(`/systemDoc/doc/${rowData.docid}`);
              }}
              getTemplate={this.getTemplate}
              onEndReached={docListStore.getNextPage}
              onRefresh={() => docListStore.refreshLoading({...searchKey})}
            />
          </div>
        </div>
        <Add store={addStore}/>
        <AddButton onClick={() => {
          const {history} = this.props;
          history.push(addStore.path);
        }}/>
      </div>
    );
  }
  
  getTemplate = (template) => {
    const newTemp = {
      ...template,
      default: [{
        key: 'col_1',
        render: (rowData) => {
          const {systemDocStore} = this.props, {tabKey} = systemDocStore,
            isnew = parseInt(rowData.isnew), itemClsPre = 'system-doc-list-row';
          return (
            <div key={rowData.docid} className={itemClsPre}>
              {
                rowData.icon.iconUrl ?
                  <img src={rowData.icon.iconUrl} alt="" className={`${itemClsPre}-img`}/>
                  :
                  <Icon type={`${rowData.icon.iconType}`} size="lg" className={`${itemClsPre}-img`} color={`${rowData.icon.iconColor}`}/>
              }
              {isnew ? <Badge dot/> : ''}
              <div className={`${itemClsPre}-content`}>
                <div className={`${itemClsPre}-title`}>{rowData.docTitle}</div>
                <div className={`${itemClsPre}-sub`}>
                  <span className={`${itemClsPre}-sub-username`}>{rowData.username}</span>
                  <span>{rowData.updateTime}</span>
                  {tabKey === 'my' && <span className={`${itemClsPre}-sub-right`}>{rowData.docstatus}</span>}
                </div>
              </div>
            </div>
          );
        },
      }],
    };
    return newTemp;
  }
}